<template>
  <div class="home" style="margin-left: 5px;width: auto">
<!--    搜索区域-->
    <div style="margin: 10px">
      <el-input v-model="search" placeholder="请输入要搜索的内容" style="width: 20%" clearable/>
      <el-select v-model="search_status" class="m-2" style="margin-left: 10px" @change="searchStatus" clearable placeholder="按订单状态查找">
        <el-option
            v-for="item in options"
            :key="item.status"
            :label="item.name"
            :value="item.status"
        />
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="pageList">搜索</el-button>
    </div>
    <!--    功能区域-->
<!--    <div style="margin: 10px">-->
<!--      <el-button type="primary" @click="add">新增类型</el-button>-->
<!--    </div>-->
<!--    数据区域-->
    <el-table :data="tableData" border stripe style="width: calc(100vw - 205px)">
      <el-table-column :resizable="false" prop="id" label="id" />
<!--      <el-table-column :resizable="false" prop="orderNo" label="订单编号" />-->
      <el-table-column :resizable="false" prop="createTime" label="下单时间" />
      <el-table-column :resizable="false" prop="address" label="配送地址" />
      <el-table-column :resizable="false" prop="phone" label="联系电话" />

      <el-table-column :resizable="false" label="支付状态" >
        <template #default="scope">
          <span v-if="scope.row.pay==0" style="color: crimson">未支付</span>
          <span v-if="scope.row.pay==1" style="color: greenyellow">已支付</span>
        </template>
      </el-table-column>

      <el-table-column :resizable="false" label="订单状态" >
        <template #default="scope">
          <span v-if="scope.row.status==0" style="color: #E6A23C">未生效</span>
          <span v-if="scope.row.status==1" style="color: #E6A23C">正在制作</span>
          <span v-if="scope.row.status==2" style="color: #409EFF">正在配送</span>
          <span v-if="scope.row.status==3" style="color: #67C23A">订单完成</span>
          <span v-if="scope.row.status==4" style="color: #F56C6C">订单已退款</span>
        </template>
      </el-table-column>
      <el-table-column :resizable="false" label="订单总金额">
        <template #default="scope">
          <span style="color: orangered"><b>¥ {{ scope.row.totalPrice }}</b></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250px">
        <template #default="scope">
<!--          购买-->
          <el-button v-if="scope.row.pay==0" type="primary" size="mini" @click="buy(scope.row.id)">去支付</el-button>
          <el-button v-if="scope.row.pay==1" size="mini" style="color: #67C23A" disabled="true">已支付</el-button>
<!--          修改按钮-->
          <el-button @click="handleDetail(scope.row)">详情</el-button>
<!--          删除按钮-->
          <el-popconfirm title="确认删除吗?" @confirm="handleDelet(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!--    分页插件-->
    <div style="margin: 10px">
      <el-pagination
          :currentPage="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 9]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
<!--    新增的模态窗口-->
    <el-dialog
        v-model="dialogVisible"
        title="订单详情"
        width="40%"
    >
<!--      窗口内的订单详情-->
      <el-table :data="tableData_Order" style="width: 100%">
        <el-table-column :resizable="false" label="菜品图片">
          <template #default="scope">
            <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
                :initial-index="4"
                fit="cover"
            />
          </template>
        </el-table-column>

        <el-table-column prop="name" label="菜品名称" />
        <el-table-column prop="price" label="菜品单价" />
        <el-table-column prop="num" label="数量" />
        <el-table-column label="小计">
          <template #default="scope">
            <span style="color: orangered"><b>¥  {{scope.row.price * scope.row.num}}</b></span>
          </template>
        </el-table-column>
      </el-table>

<!--新增的模态窗口的确认按钮-->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">确认</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import request from "@/utils/request";

export default {
  name: 'HomeView',
  components: {
    //注册

  },
  data() {
    return {
      form:{},
      dialogVisible:false,
      search:'',
      total:10,
      currentPage:1,
      pageSize:5,
      tableData:[],
      tableData_Order:[],
      options:[
        {
          status: '0',
          name: '未生效',
        },
        {
          status: '1',
          name: '正在制作',
        },
        {
          status: '2',
          name: '正在配送',
        },
        {
          status: '3',
          name: '订单完成',
        },
        {
          status: '4',
          name: '订单已退款',
        },
      ],
      search_status:'',
      discount: 1,
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
    }
  },
  created() {
    this.pageList()
    this.getMyVip()
  },
  methods:{
    //获得用户vip等级
    getMyVip(){
      request.get("order/vip/getMyVip",{params:{id:this.user.id}}).then(res =>{
        this.discount=res.data.discount
      })
    },
    buy(orderId) {
      request.get("/order/order/buy/" + orderId).then(res => {
        // 请求成功跳转沙箱支付的页面
        window.open(res.data)
      })
    },
    searchStatus(val) {
      //按状态查询
      request.get("order/order/searchStatus", {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          status: val
        }
      }).then(res =>{
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    changeStatus(row) {
      //改变状态
      request.post("order/order/changeStatus", {id:row.id,status:row.status}).then(res =>{
        this.msgTip("修改",res);
      });
    },
    pageList(){
      request.get("order/order/pageList", {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          userName: this.search
        }
      }).then(res =>{
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    save(){
      //修改订单状态
      request.put("order/order/save", {id:this.form.id}).then(res =>{
        this.msgTip("修改",res);
      });
      this.pageList();
      this.dialogVisible=false;
    },
    handleDetail(row){
      //打开订单详情模态窗口
      request.get("order/order/detail", {
        params: {
          id: row.orderNo
        }
      }).then(res =>{
        this.tableData_Order = res.data
      })
      this.dialogVisible = true
    },
    handleDelet(id){
      //删除
      request.delete("order/order/delete/" + id).then(res => {
        this.msgTip("删除",res);
        this.pageList();
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.pageList()
    },
    handleCurrentChange(currentPage){
      this.currentPage=currentPage;
      this.pageList()
    },
    msgTip(msg,res){
      if(res.code == 200){
        this.$message({
          type:"success",
          message: msg+"成功"
        })
      }else{
        this.$message({
          type:"error",
          message:res.msg
        })
      }
    }
  }
}
</script>
